<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="alitem" @click="backChange">
          <el-icon size="24" style="cursor: pointer">
            <ArrowLeftBold />
          </el-icon>
          <span style="cursor: pointer">系统更新管理</span>
        </div>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="标题" prop="name" class="margintop mb20">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="内容" prop="content" class="margintop mb20">
        <UEditorPlus
          :id="id1"
          v-model="ruleForm.content"
          @update:modelValue="editorChange"
        />
      </el-form-item>

      <el-form-item style="padding-left: 70px" class="margintop mb20">
        <el-button
          :disabled="btnLoading"
          type="primary"
          style="width: 170px"
          class="height40"
          @click="submitForm(ruleFormRef)"
        >
          {{ btnLoading ? '保存中...' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import operation from '@/modules';
const { getInfo, save } = operation;
const { proxy } = getCurrentInstance();
// 通过路由传递的参数
const id = ref('');
const type = ref('');

const btnLoading = ref(false);
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref(null);
const id1 = 'systemUpdate';

const ruleForm = ref({
  name: '',
  content: '',
});
const modelValueList = ref([]);
const rules = reactive({
  name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
});
function editorChange(val) {
  ruleForm.pcDescription = val;
}
// 提交
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // id存在为修改，不存在为新增
      if (id.value) {
        ruleForm.value.id = id.value;
        handleAddNewsSave();
      } else {
        handleAddNewsSave();
      }
    } else {
      return;
    }
  });
};
// 保存
const handleAddNewsSave = () => {
  btnLoading.value = true;
  ruleForm.value.id = id.value || 0; // 0表示新增
  ruleForm.value.type = type.value;

  save(ruleForm.value)
    .then((res) => {
      if (res.code == 20000) {
        proxy.$modal.msgSuccess(res.msg);
        btnLoading.value = false;
        router.push('/operation/systemUpdate');
      } else {
        btnLoading.value = false;
      }
    })
    .catch(() => {
      btnLoading.value = false;
    });
};
// 返回
function backChange() {
  id.value = '';
  type.value = '';
  router.push('/operation/systemUpdate');
}

// 查看详情
const handleLookNewsDetail = () => {
  getInfo({ id: route.query.id || 0, type: route.query.type }).then((res) => {
    if (res.code == 20000) {
      if (res.data.image_url) {
        modelValueList.value = res.data.image_url.split(',');
      } else {
        modelValueList.value = '';
      }
      ruleForm.value = res.data;
    }
  });
};
id.value = route.query.id;
type.value = route.query.type;
if (id.value) {
  handleLookNewsDetail();
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.select-option-item {
  display: flex;
  flex-direction: row;
}
</style>
